<template>
  <div class="musicScore">
    <!-- <button  @click.stop.prevent="goToScoreDetails">跳转乐曲详情</button>
    <div class="loadMore">{{more? '加载更多...': '没有更多~'}} </div>
    <div class="loadMore" v-if="!more">没有更多~</div> -->

    <div class="scoreNavigate">
      <span @click.stop.prevent="selectScoreNavigate(false)">曲谱库</span>
      <span @click.stop.prevent="selectScoreNavigate(true)">我的曲谱</span>
      <div :class="{active: selectFlag == true}"></div>
    </div>
    <div class="scoreGrabble" @click.stop.prevent="goToScoreGrabble">
      <img src="http://mobuz-mp.cdn.bcebos.com/matter/search@2x.png">
    </div>
    <div class="scoreContent">
      <div v-if="!selectFlag">
        <div class="scoreCell" v-for="(item, index) in scoreData" :key="index" @click.stop.prevent="goToScoreDetails(item)">
          <div class="cellLeft">
            <img v-if="item.SINGER_IMG" :src="item.SINGER_IMG">
            <img v-if="!item.SINGER_IMG" src="http://mobuz-mp.cdn.bcebos.com/matter/loading_figure@2x.png">
          </div>
          <div class="cellRight">
            <div>
              <div class="scoreName">{{item.NAME}}</div>
              <!-- <div class="scoreHot">
                <div class="hotIcon">
                  <img src="http://mobuz-mp.cdn.bcebos.com/matter/heat@2x.png">
                </div>
                <div class="hotCount">{{item.HOT? item.HOT: 0}}</div>
              </div> -->
            </div>
            <div>
              <div class="scoreSinger">{{item.SINGER}}</div>

              <div class="scoreHot">
                <div class="hotIcon">
                  <img src="http://mobuz-mp.cdn.bcebos.com/matter/heat@2x.png">
                </div>
                <div class="hotCount">{{item.HOT? item.HOT: 0}}</div>
              </div>


              <div class="scoreCollect" v-if="!item.FAVORITE_ID" @click.stop.prevent="enshrineScoreToLibrary(item)">
                <img src="http://mobuz-mp.cdn.bcebos.com/matter/not_like@2x.png">
              </div>
              <div class="scoreCollect" v-if="item.FAVORITE_ID" @click.stop.prevent="removalScoreFromLibrary(item)">
                <img src="http://mobuz-mp.cdn.bcebos.com/matter/like@2x.png">
              </div>
            </div>
          </div>
        </div>
        
      </div>
      <div v-if="selectFlag">
        <div class="scoreCell" v-for="(item, index) in collectData" :key="index" @click.stop.prevent="goToScoreDetails(item)">
          <div class="cellLeft">
            <img v-if="item.SINGER_IMG" :src="item.SINGER_IMG">
            <img v-if="!item.SINGER_IMG" src="http://mobuz-mp.cdn.bcebos.com/matter/loading_figure@2x.png">
          </div>
          <div class="cellRight">
            <div>
              <div class="scoreName">{{item.NAME}}</div>
              <!-- <div class="scoreHot">
                <div class="hotIcon">
                  <img src="http://mobuz-mp.cdn.bcebos.com/matter/heat@2x.png">
                </div>
                <div class="hotCount">{{item.HOT? item.HOT: 0}}</div>
              </div> -->
            </div>
            <div>
              <div class="scoreSinger">{{item.SINGER}}</div>
              <div class="scoreHot">
                <div class="hotIcon">
                  <img src="http://mobuz-mp.cdn.bcebos.com/matter/heat@2x.png">
                </div>
                <div class="hotCount">{{item.HOT? item.HOT: 0}}</div>
              </div>
              <div class="scoreCollect" @click.stop.prevent="removalScoreFromLibrary(item)">
                <img src="http://mobuz-mp.cdn.bcebos.com/matter/like@2x.png">
                <!-- <img src="http://mobuz-mp.cdn.bcebos.com/matter/not_like@2x.png"> -->
              </div>
            </div>
          </div>
        </div>
        <div class="scoreNone" v-if="collectState === 3">
          <img src="http://mobuz-mp.cdn.bcebos.com/matter/default_04@2x.png">
          <div class="scoreAdd" @click.stop.prevent="selectScoreNavigate(false)">添加曲谱</div>
        </div>
      </div>
    </div>
    <div class="scoreLoading" v-if="!moreLibrary">没有更多~</div>

  </div>
</template>

<script>
import {obtainMusicScore, obtainCollectScore, appendScoreToCollect, removeScoreToCollect} from '@/config/api'
import {showMessager} from "@/config/wUtils"
export default {
  data () {
    return {
      // 曲谱库数据
      scoreData: [],
      // 收藏数据
      collectData: [],
      // 本地用户信息
      userInfo: '',

      // 曲谱库 页码数
      pageLibrary: 0,
      // 我的收藏 页码数
      pageCollect: 0,

      // 曲谱库 加载更多
      moreLibrary: true,
      // 我的收藏 加载更多
      moreCollect: true,

      // 拉取方向  (1 -- 上拉  2  -- 下拉)
      pullDirection: 1,
      // // 我的收藏 拉取方向  (1 -- 上拉  2  -- 下拉)
      // pullCollect: 1,

      // 选中曲谱选项   (false -- 曲谱库     true -- 我的曲谱)
      selectFlag: false,

      // 加载收藏数据状态   1 -- 记载中   2  加载结束  3 没数据
      collectState: 0,
    }
  },
  mounted () {
    let self = this
    // 初始化 曲谱界面
    self.initMusicScore()
  },
  methods: {
    // 初始化 曲谱界面
    async initMusicScore(){
      let self = this;
      // // 曲谱库数据
      // self.scoreData = []
      // // 曲谱库 页码数
      // self.pageLibrary = 0
      // 本地用户信息
      self.userInfo = await wx.getStorageSync('userInfo')
      if (JSON.stringify(self.userInfo) != '[]') {
        if(!self.selectFlag) {
          // 获取 曲谱库 列表
          self.obtainScoreLibrary()
        } else {
          // 获取 我的曲谱 列表
          self.obtainScoreCollect()
        } 
      }
    },

    // 获取 曲谱库 列表
    async obtainScoreLibrary(){
      let self = this;
      wx.showNavigationBarLoading()
      // wx.showLoading({title: '加载中'})
      let scoreInfo = await obtainMusicScore(self.pageLibrary, self.userInfo.openId, self.userInfo.unionId)
      console.log(scoreInfo, self.pageLibrary, '.......scoreInfo')
      if (scoreInfo.status === 200) {
        if (scoreInfo.data.length < 10 && self.pageLibrary > 0) {
          self.moreLibrary = false
        } else {
          if (scoreInfo.data.length === 0) {
            self.moreLibrary = false
          } else {
            self.moreLibrary = true
          }
        }
        if (JSON.stringify(self.scoreData) === '[]') {
          // 曲谱库数据
          self.scoreData = scoreInfo.data
        } else {
          if (self.pullDirection === 1) {
            // 曲谱库数据
            self.scoreData = self.scoreData.concat(scoreInfo.data)
          }
          console.log(self.scoreData, '.......self.scoreData')
        }
      }
      wx.hideNavigationBarLoading()
      // wx.hideLoading()
      wx.stopPullDownRefresh()

      // 曲谱库 拉取方向  (1 -- 上拉  2  -- 下拉)
      if (self.pullDirection === 1) {
        self.pageLibrary++
      }
      // 曲谱详情 返回 缓存 是否收藏状态
      if (wx.getStorageSync('collect_true') || wx.getStorageSync('collect_false')) {
        self.scoreData.some((item, index) => {
          // console.log(item, '.....item...')
          if (item.ID == wx.getStorageSync('collect_true')){
            self.$set(item, 'FAVORITE_ID', 10086)
            // 清空 本地 收藏图谱
            wx.removeStorageSync('collect_true')
            // console.log(item, '...self.scoreData[i]')
            return
          }
          if (item.ID == wx.getStorageSync('collect_false')){
            self.$set(item, 'FAVORITE_ID', '')
            // 清空 本地 不收藏图谱
            wx.removeStorageSync('collect_false')
            return
          }
        });
      }
      // 曲谱详情 返回 缓存 浏览量
      if (wx.getStorageSync('browse_score')) {
        self.scoreData.some((item, index) => {
          // console.log(item, '.....item...')
          if (item.ID == wx.getStorageSync('browse_score')){
            self.$set(item, 'HOT', (item.HOT-0+1))
            // 清空 本地 收藏图谱
            wx.removeStorageSync('browse_score')
            // console.log(item, '...self.scoreData[i]')
            return
          }
        });
      }
    },
    // 获取 我的曲谱 列表
    async obtainScoreCollect(){
      let self = this;
      // 加载收藏数据状态   1 -- 记载中   2  加载结束  3 没数据
      self.collectState = 0
      wx.showNavigationBarLoading()
      let scoreInfo = await obtainCollectScore(self.pageLibrary, self.userInfo.openId, self.userInfo.unionId)
      console.log(scoreInfo, '.......scoreInfo')
      if (scoreInfo.status === 200) {
        // 收藏数据
        self.collectData = scoreInfo.data
        if (JSON.stringify(self.collectData) === '[]') {
          // 加载收藏数据状态   1 -- 记载中   2  加载结束  3 没数据
          self.collectState = 3
        }
      }
      wx.hideNavigationBarLoading()
      // wx.hideLoading()
      wx.stopPullDownRefresh()
    },






    // 收藏 图谱到曲谱库
    async enshrineScoreToLibrary(item) {
      let self = this;
      self.$set(item, 'FAVORITE_ID', 10086)
      // // 本地用户信息
      // const userInfo = await wx.getStorageSync('userInfo')
      let collectState = await appendScoreToCollect(item.ID, self.userInfo.openId, self.userInfo.unionId)
      console.log(collectState, item, '搜藏 图谱到曲谱库')
    },
    // 移除 图谱于曲谱库
    async removalScoreFromLibrary(item) {
      let self = this;
      self.$set(item, 'FAVORITE_ID', '')
      // // 本地用户信息
      // const userInfo = await wx.getStorageSync('userInfo')
      let collectState = await removeScoreToCollect(item.ID, self.userInfo.openId, self.userInfo.unionId)
      console.log(collectState, item, '移除 图谱于曲谱库')
      // 同步 曲谱库 收藏记录
      self.scoreData.some((itemLibrary, index) => {
        if (itemLibrary.ID == item.ID){
          self.$set(itemLibrary, 'FAVORITE_ID', '')
          return
        }
      });




      // 选中曲谱选项   (false -- 曲谱库     true -- 我的曲谱)
      if(self.selectFlag) {
        // 获取 我的曲谱 列表
        self.obtainScoreCollect()
      }
    },


    // 选择  曲谱导航
    selectScoreNavigate(flag) {
      let self = this;
      wx.pageScrollTo({
        scrollTop: 0,
        duration: 100
      })
      // 选中曲谱选项   (false -- 曲谱库     true -- 我的曲谱)
      self.selectFlag = flag
      if(!self.selectFlag) {
        // 获取 曲谱库 列表
        self.obtainScoreLibrary()
      } else {
        // 获取 我的曲谱 列表
        self.obtainScoreCollect()
      }
    },


    
    // 跳转到 乐曲详情页
    goToScoreDetails(item){
        wx.navigateTo({
            url: '../scoreParticulars/main?score_id='+item.ID
        })
    },
    // 跳转到 乐曲搜索页
    goToScoreGrabble(){
        wx.navigateTo({
            url: '../scoreSearch/main'
        })
    },

    

    //  launchAppError(e) {
    //   let self = this;
    //   console.log(e.mp.detail.errMsg)
    //   showMessager(e.mp.detail.errMsg)
    // } 
  },
  // 下拉刷新
  onPullDownRefresh () {
    let self = this;
    // 曲谱库 拉取方向  (1 -- 上拉  2  -- 下拉)
    self.pullDirection = 2
    if(!self.selectFlag) {
      // 获取 曲谱库 列表
      self.obtainScoreLibrary()
    } else {
      // 获取 我的曲谱 列表
      self.obtainScoreCollect()
    } 
  },
  // 上拉加载
  onReachBottom () {
    console.log('上拉加载')
    let self = this;
    // 曲谱库 拉取方向  (1 -- 上拉  2  -- 下拉)
    self.pullDirection = 1
    if(!self.selectFlag) {
      if (!self.moreLibrary){
        return
      }
      // 获取 曲谱库 列表
      self.obtainScoreLibrary()
    } else {
      // // 获取 我的曲谱 列表
      // self.obtainScoreCollect()
    } 
  },
  // 页面显示
  onShow () {
    let self = this;
    console.log('页面显示')
    // 曲谱搜索 返回 缓存 是否 重新加载
    if (wx.getStorageSync('score_load')){
      // 清空 本地 重新加载
      wx.removeStorageSync('score_load')
      // 曲谱库数据
      self.scoreData = []
      // 曲谱库 页码数
      self.pageLibrary = 0
    }
    // 初始化 曲谱界面
    self.initMusicScore()
  } 
}
</script>

<style lang="less" scoped>
.musicScore{
  width: 100%;
  min-height: 1334rpx;
  background: #f7f7f7;
  position: relative;
  .scoreNavigate{
    width: 100%;
    height: 75rpx;
    font-size: 0;
    // position: relative;
    position: fixed;
    background: #f7f7f7;
    span{
      font-family: PingFangSC-Regular;
      font-size: 28rpx;
      color: #333333;
      letter-spacing: 0.7rpx;
      text-align: center;
      display: inline-block;
      height: 40rpx;
      margin: 14rpx 5rpx 0 192rpx;
      // &:nth-child(1){
      //   margin-left: 192rpx;
      //   margin-right: 192rpx;
      // }
    }
    > div {
      position: absolute;
      margin-left: 215.5rpx;
      height: 2rpx;
      left: 0;
      transition: all 0.3s;
      margin-top:5rpx;
      &::before {
        content: '';
        position: absolute;
        width: 40rpx;
        height: 2rpx;
        background-color: #ee3a29;
        border-radius: 4rpx;
        -webkit-border-radius: 4rpx;
        box-sizing: border-box;
      } 
      &.active {
        margin-top:5rpx;
        margin-left: 508.5rpx;
        transform:translate(100%)
      }
    }
  }
  .scoreGrabble{
    width: 38.2rpx;
    height: 38.2rpx;
    // position: absolute;
    position: fixed;
    top: 14rpx;
    right: 57.8rpx;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .scoreContent{
    width: 100%;
    font-size: 0;
    padding-top: 75rpx;
    min-height: 1334rpx;
    .scoreCell{
      width: 686rpx;
      height: 244rpx;
      margin: 0 auto;
      margin-bottom: 24rpx;
      background: #FFFFFF;
      box-shadow: 0 0 12rpx 2rpx rgba(223,223,223,0.30);
      border-radius: 10rpx;
      .cellLeft{
        display: inline-block;
        vertical-align: top;
        width: 180rpx;
        height: 180rpx;
        margin: 32rpx 25rpx 32rpx 32rpx;
        border-radius: 10rpx;
        overflow: hidden;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .cellRight{
        display: inline-block;
        vertical-align: top;
        width: 440rpx;
        > div{
          width: 100%;
          &:nth-child(1){
            margin-top: 52rpx;
            .scoreName{
              display: inline-block;
              vertical-align: middle;
              // max-width: 154rpx;
              max-width: 90% !important;
              white-space: nowrap;
              overflow: hidden;
              /* 文本超出变省略号 */
              text-overflow: ellipsis;
              -o-text-overflow: ellipsis;
              height: 42rpx;
              line-height: 42rpx;
              font-family: PingFangSC-Regular;
              font-size: 30rpx;
              color: #333333;
              letter-spacing: 0.75rpx;
              margin-right: 36rpx; 
            }
            // .scoreHot{
            //   display: inline-block;
            //   vertical-align: middle;
            //   .hotIcon{
            //     display: inline-block;
            //     vertical-align: middle;
            //     width: 23rpx;
            //     height: 27rpx;
            //     line-height: 27rpx;
            //     margin-right: 9.5rpx;
            //     img{
            //       width: 100%;
            //       height: 100%;
            //     }
            //   }
            //   .hotCount{
            //     display: inline-block;
            //     vertical-align: middle;

            //     font-family: PingFangSC-Regular;
            //     font-size: 24rpx;
            //     color: #666666;
            //   }
            // }
          }
          &:nth-child(2){
            margin-top: 65rpx;
            .scoreSinger{
              display: inline-block;
              vertical-align: middle;
              width: 200rpx !important;
              white-space: nowrap;
              overflow: hidden;
              /* 文本超出变省略号 */
              text-overflow: ellipsis;
              -o-text-overflow: ellipsis;
              font-family: PingFangSC-Regular;
              font-size: 24rpx;
              color: #999999;
              letter-spacing: 0.6rpx;
              margin-right: 38rpx;
            }

            .scoreHot{
              display: inline-block;
              vertical-align: middle;
              margin-right: 10rpx;
              .hotIcon{
                display: inline-block;
                vertical-align: middle;
                width: 23rpx;
                height: 27rpx;
                line-height: 27rpx;
                margin-right: 10rpx;
                img{
                  width: 100%;
                  height: 100%;
                }
              }
              .hotCount{
                display: inline-block;
                vertical-align: middle;

                font-family: PingFangSC-Regular;
                font-size: 24rpx;
                color: #666666;

                margin-top: 3rpx;
                width: 90rpx !important;
                white-space: nowrap;
                overflow: hidden;
                /* 文本超出变省略号 */
                text-overflow: ellipsis;
                -o-text-overflow: ellipsis;
              }
            }


            .scoreCollect{
              display: inline-block;
              vertical-align: middle;
              padding: 8rpx 15rpx;
              width: 30rpx;
              height: 27rpx;
              img{
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
    }
    .scoreNone{
      width: 430rpx;
      height: 354rpx;
      margin: 0 auto;
      margin-top: 32rpx;
      img{
        width: 100%;
        height: 100%;
        display: block;
      }
      .scoreAdd{
        font-family: PingFangSC-Regular;
        font-size: 30rpx;
        color: #FFFFFF;
        letter-spacing: 0.76rpx;

        width: 200rpx;
        height: 55rpx;
        line-height: 55rpx;
        margin: 40rpx auto;
        background-image: linear-gradient(90deg, #FFB497 0%, #FE7A72 100%);
        border-radius: 8rpx;
        text-align: center;
      }
    }
  }
  .scoreLoading{
    width:100%;
    text-align:center;
    font-family:PingFangSC-Regular;
    font-size:26rpx;
    color:#999999;
    letter-spacing:0.7rpx;
    line-height:1;
    margin-top:13rpx;
    padding-bottom:30rpx;
  }
}
</style>
